<template>
  <div>
      <!-- 面包屑区域 -->
      <el-breadcrumb>
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>志愿者管理</el-breadcrumb-item>
          <el-breadcrumb-item>志愿者信息</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 头部区域  -->
      <el-row :gutter="20">
          <el-col :span="4">
              <el-input v-model="ActivityId" size="large"  placeholder="活动ID" clearable />
          </el-col>
          <el-col :span="4">
              <el-row :gutter="100">
                  <el-col :span="4">
                      <el-button type="info" size="large" @click="queryActivity">
                          <el-icon>
                              <Search />
                          </el-icon>&nbsp; 查询</el-button>
                  </el-col>
                  <el-col :span="4">
                      <el-button type="primary" size="large" @click="isSave">
                          <el-icon>
                              <Plus />
                          </el-icon>&nbsp; 新增</el-button>
                  </el-col>
              </el-row>
          </el-col>
      </el-row>

      <!-- 列表区域 -->
      <el-table :data="activityList" stripe border style="width: 100%">
          <el-table-column type="index" label="#" width="40px" />
          <el-table-column prop="name"  align="center" label="姓名" />
          <el-table-column prop="sex" align="center" label="性别" />
          <el-table-column prop="age" align="center" label="年龄" />
          <el-table-column prop="phone" align="center" label="联系方式" />
          <el-table-column>
              <template v-slot="scope">
                  <el-button type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
                  <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination v-model:currentPage="query.currentPage" v-model:page-size="query.pageSize" :page-sizes="[5, 7]"
          background layout="total, sizes, prev, pager, next, jumper" :total="query.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />

      <!-- 新增页面的dialog -->
      <el-dialog v-model="isDialogSave" title="新增志愿者" width="50%" align-center>
          <!-- 添加的表单区域 -->
          <el-form ref="saveRef" :model="activityForm" :rules="saveRules" label-width="120px" status-icon>
            <el-form-item label="姓名" prop="name">
                  <el-input v-model="activityForm.name" />
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                  <el-input v-model="activityForm.sex" />
              </el-form-item>
              <el-form-item label="年龄" prop="age">
                  <el-input v-model="activityForm.age" />
              </el-form-item>
              <el-form-item label="联系方式" prop="phone">
                  <el-input v-model="activityForm.phone" />
              </el-form-item>
          </el-form>
          <template #footer>
              <span class="dialog-footer">
                  <el-button @click="isDialogSave = false">取消</el-button>
                  <el-button type="primary" @click="save(saveRef)">确定</el-button>
              </span>
          </template>
      </el-dialog>

      <!-- 编辑页面的dialog -->
      <el-dialog v-model="isDialogEdit" title="编辑志愿者" width="50%" align-center>
          <el-form ref="saveRef" :model="activityForm" :rules="saveRules" label-width="120px" status-icon>
              <el-form-item label="姓名" prop="name">
                  <el-input v-model="activityForm.name" />
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                  <el-input v-model="activityForm.sex" />
              </el-form-item>
              <el-form-item label="年龄" prop="age">
                  <el-input v-model="activityForm.age" />
              </el-form-item>
              <el-form-item label="联系方式" prop="phone">
                  <el-input v-model="activityForm.phone" />
              </el-form-item>

          </el-form>

          <template #footer>
              <span class="dialog-footer">
                  <el-button @click="isDialogEdit = false">取消</el-button>
                  <el-button type="primary" @click="isEdit">确定</el-button>
              </span>
          </template>
      </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import { getActivity, QuerryActivity, saveActivity, deleteActivity, updateActivity } from '@/api/volunteerall/volunteer'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
export default defineComponent({
  setup () {
    onMounted(() => {
      getActivityList()
    })
    // 活动列表
    const activityList = ref([])
    // 分页的查询数据
    const query = reactive({
      currentPage: 1,
      pageSize: 5,
      total: 0,
      status: 0
    })
    // 活动数据
    const activityForm = reactive({
      name: '',
      sex: '',
      age: '',
      phone: ''
    })
    // 校检规则
    const saveRules = reactive({
      name: [
        { required: true, message: '此项是必填项', trigger: 'blur' }
      ],
      sex: [{ required: true, message: '此项是必填项', trigger: 'blur' }],
      age: [{ required: true, message: '此项是必填项', trigger: 'blur' }],
      phone: [{ required: true, message: '此项是必填项', trigger: 'blur' }]

    })
    const options = [
      {
        value: 'true',
        label: '规划中'
      },
      {
        value: 'false',
        label: '已结束'
      }]
    //   查询活动的id
    const ActivityId = ref('')

    const saveRef = ref<FormInstance>()
    // 是否展开新增页面
    const isDialogSave = ref(false)
    // 是否展开编辑页面
    const isDialogEdit = ref(false)
    const handleSizeChange = (Val:number) => {
      query.pageSize = Val
    }
    const handleCurrentChange = (Val:number) => {
      query.currentPage = Val
      getActivityList()
    }
    const handleUpdate = async (row: any) => {
      isDialogEdit.value = true
      const { data: res } = await QuerryActivity(row.id)
      console.log(res)

      if (res.code !== 200) return ElMessage.error('数据获取失败')
      Object.assign(activityForm, res.data)
    }
    const handleDelete = (row: any) => {
      ElMessageBox.confirm(
        '此操作会永久删除数据，是否继续?',
        '提示',
        {
          confirmButtonText: '确定  ',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          const { data: res } = await deleteActivity(row.id)
          if (res.code !== 200) return ElMessage.error(res.msg)
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          getActivityList()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除'
          })
        })
    }

    // 新增数据
    const save = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate(async (valid, fields) => {
        if (valid) {
          const { data: res } = await saveActivity(activityForm)
          if (res.code !== 200) return ElMessage.error(res.msg)
          getActivityList()
          //   清空表单
          isDialogSave.value = false
          formEl.resetFields()
          ElMessage.success(res.msg)
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    // 确认编辑提交请求按钮
    const isEdit = async () => {
      const { data: res } = await updateActivity(activityForm)
      if (res.code !== 200) return ElMessage.error('数据获取失败')
      ElMessage.success('更新成功')
      isDialogEdit.value = false
      getActivityList()
    }

    const isSave = () => {
      activityForm.name = ''
      activityForm.sex = ''
      activityForm.age = ''
      activityForm.phone = ''
      isDialogSave.value = true
    }
    // 查询所有的活动
    const getActivityList = async () => {
      const { data: res } = await getActivity(query.status, query.currentPage, query.pageSize)
      if (res.code !== 200) return ElMessage.error('获取数据失败，请检查网络！')
      query.total = res.data.total
      activityList.value = res.data.records
      //   console.log(res)
    }
    // 根据id查询活动
    const queryActivity = async () => {
      const { data: res } = await QuerryActivity(ActivityId.value)
      if (res.code !== 200) return ElMessage.error('查询失败！')
      activityList.value = res.data
      ElMessage.success('查询成功！')
    }

    return {
      query,
      isDialogEdit,
      isDialogSave,
      handleSizeChange,
      handleCurrentChange,
      handleUpdate,
      handleDelete,
      activityForm,
      save,
      isEdit,
      activityList,
      saveRules,
      isSave,
      getActivityList,
      options,
      saveRef,
      ActivityId,
      queryActivity
    }
  }
})
</script>

<style lang="less" scoped>

</style>
